<template>
    <div class="login">
        <van-form class="form" @submit="OnLogin">
            <div class="avatar">
                <img src="/assets/images/avatar.png" />
            </div>

            <van-field
                v-model="business.mobile"
                name="mobile"
                placeholder="手机号码"
                left-icon="phone-o"
                :rules="[
                    { required: true, message: '请填写手机号码' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
                ]"
            />

            <van-field v-model="business.password" type="password" name="password" placeholder="密码" left-icon="warn-o" :rules="[{ required: true, message: '请填写密码' }]" />

            <div class="button">
                <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">
                    注册登录
                </van-button>
            </div>

            <div class="forget">
                <router-link to="/">返回首页</router-link>
            </div>
        </van-form>
    </div>
</template>

<script setup>
// 获取类似于vue2的this对象
const { proxy } = getCurrentInstance();

const business = reactive({
    mobile:'13600000000',
    password:'demo123'
});

const token = ref(proxy.$route.query.token ?? '');

onBeforeMount(() => {
    if(Object.getOwnPropertyNames(proxy.$business.value).length > 0)
    {
        proxy.$fail('您已登录，无须重复登录',() => proxy.$router.push('/business'));
    }
});

const OnLogin = async (values) =>
{
    if(token.value)
    {
        values.token = token.value;
    }

    const result = await proxy.$http.post({
        url:'/business/login',
        params:values
    });

    if(result.code === 1)
    {
        proxy.$success(result.msg,() => {
            // 更新business状态管理
            proxy.$business.value = result.data;

            // 读取cookie存储的action
            const action = proxy.$cookies.get('action') ?? '';

            if(action)
            {
                // 删除cookie
                proxy.$cookies.remove('action');

                proxy.$router.back();
            }else{
                // 跳转
                proxy.$router.push(result.url);
            }

        })
    }else{
        proxy.$fail(result.msg);
    }
}
</script>

<style scoped>
@import url('/assets/css/login.css');
</style>